<html>

<head>
    <meta charset="utf-8" />
    <title>Fast Doc</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.13/vue.js"></script>
    <script src="json.js"></script>
    <link rel="stylesheet" href="style.css" />
</head>

<body>
    <div id="doc">
        <h1>{{controllerInfo.name}} {{controllerInfo.description}}接口文档</h1>
        <div class="content">
            <h2>业务概述</h2>
            <p>{{controllerInfo.description}}</p>
            <h2>目录</h2>
            <ul v-for="item in list">
                <li>
                    <a :href="'#' + item.id">{{item.name}} {{item.url}}</a>
                </li>
            </ul>
        </div>

        <ul v-for="item in list">
            <li>
                <a :name="item.id"></a>
                <h2>{{item.name}}</h2>
                <div class="tag">
                    <div :class="item.httpMethod">
                        {{item.httpMethod}}
                    </div>
                    <div>
                        {{item.url}}
                    </div>
                </div>
                <div class="tag">
                    <div>
                        后端业务方法
                    </div>
                    <div>
                        {{item.methodName}}()
                    </div>
                </div>

                <p v-html="item.description"></p>

                <h3>URL</h3>
                <div class="code">
                    <span :class="item.httpMethod" style="font-weight: bold;">
                        {{item.httpMethod}}
                    </span>
                    {{root}}{{item.url}}
                    <a :href="root + item.url" target="_blank" title="打开连接">&#x1f517;</a>
                    <a href="javascript:void(0)" @click="copy(root + item.url)" title="复制">📄</a>

                    <a href="javascript:alert('TODO')" style="text-decoration:underline;">测试</a>
                </div>
                <span v-if="item.image">
                    <h3>对应 UI</h3>
                    <img class="ui" :src="'http://workwe.gz88.cc:18085/doc/images/'+ item.image + '.jpg'"
                        title="点击扩大/缩小图片" @click="enlargeImg($event)" />
                </span>


                <h3>请求参数</h3>
                <table class="b" v-if="item.args.length">
                    <tr>
                        <th>参数名称</th>
                        <th>参数位置</th>
                        <th>类型</th>
                        <th style="min-width: 200px">参数说明</th>
                        <th>是否可选</th>
                        <th>默认值</th>
                        <th>示例</th>
                    </tr>
                    <tr v-for="arg in item.args">
                        <td style="font-family: 'Courier New';">{{arg.name}}</td>
                        <td>{{arg.position}}</td>
                        <td>{{arg.type}}</td>
                        <td>
                            {{arg.description || arg.type}}<span v-if="arg.fields && arg.fields.length">，各字段如下：
                                <table style="text-align: left;" class="inner-table">
                                    <tr v-for="i in arg.fields">
                                        <td>{{i.name}}: <span style="font-family:'Courier New'">{{i.type}}</span></td>
                                        <td>{{i.commentText}}</td>
                                        <td>必填：<span style="font-family:'Courier New'">{{i.isRequired? 'true' :
                                                'false'}}</span></td>
                                    </tr>
                                </table>
                            </span>

                        </td>
                        <td>{{arg.isRequired ? '必填' : '选填'}}</td>
                        <td>{{arg.defaultValue}}</td>
                        <td class="td-json">
                            <pre v-if="arg.example">{{beautiJson(arg.example)}}</pre>
                        </td>
                    </tr>
                </table>
                <div v-if="!item.args.length">无</div>

                <table>
                    <tr>
                        <td style="vertical-align: top;">
                            <h3>返回值</h3>

                            <div class="code">
                                <div>{</div>
                                <div style="margin-left: 20px;"> "status": 1/0, <span class="comment">// 1=操作成功，
                                        0=操作失败</span>
                                </div>
                                <div style="margin-left: 20px;"> "message": "{{item.name}}", </div>
                                <div style="margin-left: 20px;"> "data": <span
                                        v-if="item.returnValue.isMany">[</span><span v-if="item.returnValue.isObject">{
                                        <span class="comment">// {{item.returnValue.name}} {{item.returnValue.description}}</span> </span>
                                    <!--- 简单值 --->
                                    <span class="type" v-if="!item.returnValue.isObject">
                                        {{item.returnValue.type}}</span>
                                </div>

                                <ul style="margin-left: 10px;" v-if="item.returnValue.isObject">
                                    <li v-for="reVal in item.returnValue.fields">
                                        <div class="block">
                                            <span class="key">{{reVal.name}}</span>: <span
                                                class="type">{{reVal.type}}</span>,
                                        </div>
                                        <span class="comment">// {{reVal.commentText}}</span>
                                    </li>
                                </ul>

                                <div style="margin-left: 20px;"><span v-if="item.returnValue.isObject">}</span><span
                                        v-if="item.returnValue.isMany">, <br />...]</span></div>
                                <div>}</div>
                            </div>
                        </td>
                        <td width="50"></td>
                        <td v-if="item.returnValue.example" style="vertical-align: top;">
                            <h3>成功的返回例子</h3>

                            <div class="code">
                                <div>{</div>
                                <div style="margin-left: 20px;"> "status": 1,
                                </div>
                                <div style="margin-left: 20px;"> "message": "{{item.name}}", </div>
                                <div style="margin-left: 20px;"> "data":
                                    <pre>{{getExample(item)}}</pre>

                                </div>

                                <div style="margin-left: 20px;"></div>
                                <div>}</div>
                            </div>
                        </td>
                        <td v-if="!item.returnValue.example && isSimpleValue(item)" style="vertical-align: top;">
                            <h3>成功的返回例子</h3>

                            <div class="code">
                                <div>{</div>
                                <div style="margin-left: 20px;"> "status": 1,
                                </div>
                                <div style="margin-left: 20px;"> "message": "{{item.name}}", </div>
                                <div style="margin-left: 20px;"> "data":
                                    <span v-if="isPreSimpleValue(item)">
                                        <span v-if="item.returnValue.type == 'java.lang.Boolean'">true</span>
                                        <span v-if="isNumber(item)">1</span>
                                    </span>
                                </div>

                                <div style="margin-left: 20px;"></div>
                                <div>}</div>
                            </div>
                        </td>
                        <td v-if="!item.returnValue.example && !isSimpleValue(item)" style="vertical-align: top;">
                            <h3>成功的返回例子</h3>

                            无
                        </td>
                    </tr>
                </table>

       <!--          <h3>备忘</h3>
                <textarea>TODO</textarea> -->
            </li>
        </ul>
    </div>
    <script>
        var arr = location.search.match(/key\=([\w\.]+)/);
        if (!arr || !arr[1])
            alert('未指定 key 参数');

        var key = arr[1];

        new Vue({
            el: document.getElementById('doc'),
            data: {
<<<<<<< HEAD
                root: 'http://workwe.gz88.cc:8077/auth_way_console',
=======
                root: 'http://xxxx.com/oba',
>>>>>>> d167e1498c8fb35af94464e5ae92a5ed586dfc62
                controllerInfo: DOC_JSON[key],
                list: DOC_JSON[key].items
            },
            methods: {
                isNumber(v) {
                    v = v.returnValue.type;
                    return v == 'java.lang.Integer' || v == 'java.lang.Long' || v == 'java.lang.Double';
                },
                // 是否可预测的简单值，如 boolean/int/long，给出的例子就是 true/1
                isPreSimpleValue(v) {
                    let returnValue = v.returnValue;
                    return returnValue.type == 'java.lang.Boolean' || returnValue.type == 'java.lang.Integer' || returnValue.type == 'java.lang.Long';
                },
                isSimpleValue(v) {
                    let returnValue = v.returnValue;

                    return !returnValue.isObject && this.isPreSimpleValue(v);
                },
                getExample(item) {
                    let eg = item.returnValue.example;

                    if (eg[0] === '{' || eg[0] === '[') {// json

                        try {
                            return JSON.stringify(JSON.parse(eg), null, 4);
                        } catch (e) {
                            console.warn('JSON 解析有错！ ', eg);
                            return 'JSON ERR';
                        }
                    } else {
                        return item.returnValue.type == 'java.lang.String' ? '"' + eg + '"' : eg;
                    }
                },
                copy(url) {
                    navigator.clipboard.writeText(url);
                    alert('已复制')
                },
                enlargeImg(e) {
                    let img = e.target;
                    if (getComputedStyle(img).maxWidth == '300px')
                        img.style.maxWidth = 'initial';
                    else
                        img.style.maxWidth = '300px';

                },
                beautiJson(json) {
                    return JSON.stringify(JSON.parse(json), null, 2);
                }
            }
        });
    </script>

</body>

</html>